var c = document.getElementById('c');
var ctx = c.getContext('2d');
var fontHeight = 24, x, y;

/**
 * ctx.textAlign(value) 可选值：
 *      start、end与left、right：在canvas的dir属性为ltr时，start与left相同，end与right相同；若dir为rtl，start与right相同，end与left相同。
 *      center：居中
 */
var alignValue = ['start', 'center', 'end']; 

/**
 * ctx.textBaseline(valeu) 可选值：
 *      top、middle、bottom：与具体语言文字无关，而是字体方框内某处定位
 *      alphabetic：拉丁字母文字
 *      ideoGraphic：中文、日文等图形文字
 *      hanging：印度语等
 */
var baselineValues = [
    'top', 'middle', 'bottom',
    'alphabetic', 'ideographic', 'hanging'
]

function drawTextMarker() {
    ctx.fillStyle = 'yellow';
    ctx.fillRect(x, y, 7, 7);
    ctx.strokeRect(x, y, 7, 7);
}

function drawText(text, textAlign, textBaseline) {
    if(textAlign) ctx.textAlign = textAlign;
    if(textBaseline) ctx.textBaseline = textBaseline;
    ctx.fillStyle = 'cornflowerblue';
    ctx.fillText(text, x, y);
}

function drawTextLine() {
    ctx.strokeStyle = 'gray';
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + 355, y);
    ctx.stroke();
}

ctx.font = 'oblique normal bold 24px palatino';

for(var align = 0; align < alignValue.length; align += 1) {
    for(var baseline = 0; baseline < baselineValues.length; baseline += 1) {
        x = 20 + align * fontHeight * 15;
        y = 20 + baseline * fontHeight * 3;
        drawText(alignValue[align] + '/' + baselineValues[baseline], alignValue[align], baselineValues[baseline]);
        drawTextLine();
        drawTextMarker();
    }
}

(function () {

var c = document.getElementById('c1');
var ctx = c.getContext('2d');

var radius = 200;

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

ctx.save();
ctx.fillStyle = 'rgba(0, 0, 230, .9)';
ctx.font = '12px Helvetica';

for(var angle = 0; angle < 2 * Math.PI; angle += Math.PI / 8) {
    ctx.beginPath();
    ctx.fillText((angle * 180 / Math.PI).toFixed(0), c.width / 2 + Math.cos(angle) * radius, c.height / 2 - Math.sin(angle) * radius);
    ctx.arc(c.width / 2 + Math.cos(angle) * radius, c.height / 2 - Math.sin(angle) * radius, 2, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
}
ctx.restore();

})();   